<template>
  <div class="sec-main">
    <div class="search-container">
      <sec-form
        :searchBox="{ span: 6 }"
        :span="6"
        :optionData="optionData"
        :formData="formData"
        :ruleForm="ruleForm"
        @reset="initSearch"
        @submitForm="initSearch"
      ></sec-form>
    </div>
    <div class="table-container scene-main tab-scene-main">
      <div class="mul-btn">
        <el-button type="primary" @click="handleBatchOpt">批量操作</el-button>
        <el-button type="primary" @click="handleColumn" icon="el-icon-plus">设置列</el-button>
      </div>
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane
          v-for="(item, index) in $store.state.dictionary[100500]"
          :key="index"
          :label="item.label"
          :name="item.value.toString()"
        ></el-tab-pane>
      </el-tabs>
      <sec-table
        selection
        ref="secTabel"
        @selectionChange="rowSelectionChange"
        :tableData="tableData"
        :tableCol="[...tableCol, this.tableColOpt]"
      >
        <!-- <template v-slot:noticeUsers="{ data }"> </template> -->
      </sec-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        background
        :layout="layout"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :total="totalSize"
      >
      </el-pagination>
    </div>
    <el-dialog append-to-body title="批量操作" :visible.sync="batchDiaShow" width="60%">
      <secBatchOpt @success="optSuccess" :ids="ids" @cancel="batchDiaShow = false" v-if="batchDiaShow"></secBatchOpt>
    </el-dialog>
    <el-dialog append-to-body title="动态列" :visible.sync="dyColDiaShow" width="60%">
      <secDyCol
        :columns="columns"
        @cancel="dyColDiaShow = false"
        @confirm="dyColConfirm"
        v-if="dyColDiaShow"
      ></secDyCol>
    </el-dialog>
  </div>
</template>

<script>
import { paginationMixin } from "common/js/mixin";
import { upmAssetListApi, getAppBelongBusinessApi, getColumnsInfoApi, updateColumnsInfoApi } from "api/authApi";
import secBatchOpt from "./components/batchOpt.vue";
import secDyCol from "./components/dyCol.vue";

export default {
  name: "planList",
  props: {},
  mixins: [paginationMixin],
  components: { secBatchOpt, secDyCol },
  data() {
    return {
      ids: [],
      activeName: "all",
      batchDiaShow: false,
      dyColDiaShow: false,
      ruleForm: { name: "", appid: "", appUseUpmAuth: "", upmStatus: "", homePage: "", belongBusinessId: "" },
      tableData: [],
      optionData: {
        upmStatus: this.$store.state.dictionary["upmStatus"],
        appUseUpmAuth: this.$store.state.dictionary["appUseUpmAuth"],
        belongBusinessId: [],
      },
      tableCol: [],
      columns: [],
    };
  },
  computed: {},
  created() {
    this.formData = [
      { type: "text", label: "名称", prop: "name" },
      { type: "text", label: "APPID", prop: "appid" },
      { type: "select", label: "是否鉴权", prop: "appUseUpmAuth" },
      { type: "select", label: "状态", prop: "upmStatus" },
      { type: "text", label: "回调地址", prop: "homePage" },
      { type: "select", label: "归属业务线", prop: "belongBusinessId", optionProps: { label: "name", value: "id" } },
    ];
    //表格的操作列
    this.tableColOpt = {
      type: "operation",
      width: 220,
      label: "操作",
      children: [
        {
          label: "资产详情",
          click: ({ row }) => {
            this.utils.$router({ path: "/property/auth/detail", query: { id: row.id } }, "_blank");
          },
        },
        {
          label: "审计详情",
          disabled: ({ row }) => {
            return row.reportId ? false : true;
          },
          click: ({ row }) => {
            let path =
              row.auditType === "upm_auth" ? "/evaluate/manage/auth/detail" : "/evaluate/manage/auth/quick/detail";
            this.utils.$router({ path, query: { id: row.reportId, assetId: row.id } }, "_blank");
          },
        },
        {
          label: "操作",
          disabled: ({ row }) => {
            return row.status === "create" ? false : true;
          },
          click: ({ row }) => {
            this.batchDiaShow = true;
            this.ids = [row.id];
          },
        },
        // {
        //   label: "编辑",
        //   click: ({ row }) => {},
        // },
      ],
    };
  },
  mounted() {
    this.initPage();
    getAppBelongBusinessApi().then((res) => {
      this.optionData.belongBusinessId = res.data || [];
    });
    this.getColumnsInfo();
  },
  methods: {
    getColumnsInfo() {
      getColumnsInfoApi().then((res) => {
        console.log(res);
        let data = res.data;
        this.columns = JSON.parse(JSON.stringify(data));
        this.tableCol = data.filter((item) => item.show == 1);
      });
    },
    optSuccess() {
      this.batchDiaShow = false;
      this.initSearch();
    },
    dyColConfirm(columns) {
      console.log(columns);
      updateColumnsInfoApi({ columns: columns }).then((res) => {
        let state = this.message.state(res);
        if (!state) return;
        this.dyColDiaShow = false;
        this.getColumnsInfo();
      });
    },
    //当选择项发生变化时会触发该事件
    rowSelectionChange(selection) {
      console.log(selection);
      this.ids = selection.map((item) => item.id);
      console.log("[ this.ids ] >", this.ids);
    },
    tabClick() {
      this.initPage();
    },
    handleColumn() {
      this.dyColDiaShow = true;
    },
    initPage() {
      this.initTableData();
    },
    initSearch() {
      this.page = 1;
      this.initPage();
    },
    initTableData() {
      let loading = this.openLoading();
      upmAssetListApi({
        pageNum: this.page,
        pageSize: this.pageSize,
        ...this.ruleForm,
        status: this.activeName === "all" ? "" : this.activeName,
      }).then((res) => {
        loading.close();
        let data = res.data;
        this.tableData = data;
        this.totalSize = res.count;
      });
    },
    handleBatchOpt() {
      if (this.ids.length === 0) {
        this.message.warning({ message: "请选择列" });
        return;
      }
      this.batchDiaShow = true;
    },
    handleCurrentChange(val) {
      this.page = val;
      this.initTableData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.initTableData();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
